<template>
	<view class="container">
		<view class="record-list">
			<view v-for="item in recordList" :key="item.id" class="record-item">
				{{ item.id}} - {{ item.create_datetime }}
				<button @click="handleDeleteClick(item)" size="mini">删除</button>
			</view>
		</view>
		<button @click="handleAddClick" size="mini" class="record-add">登记记录</button>
	</view>
</template>

<script>
import { list, add, del } from "@/api/hbvFight.js";

export default {
	data() {
		return {
			recordList: [],
		}
	},
	onLoad() {
		this.getList();
	},
	methods: {
		getList() {
			uni.showNavigationBarLoading();
			return list().then((res) => {
				this.recordList.splice(0, this.recordList.length, ...res);
			}).catch(console.warn).finally(uni.hideNavigationBarLoading);
		},
		handleAddClick() {
			uni.showLoading({
				title: '保存中'
			});
			add().then((res) => {
				uni.showToast({
					title: '已保存'
				});
				this.getList();
			}).catch(console.warn).finally(uni.hideLoading());
		},
		handleDeleteClick(item) {
			uni.showLoading({
				title: '删除中'
			});
			del({
				id: item.id
			}).then((res) => {
				uni.showToast({
					title: '已删除'
				});
				this.getList();
			}).catch(console.warn).finally(uni.hideLoading());
		},
	}
}
</script>

<style lang="scss" scoped>
	.record-list {
		background-color: white;
	}
	.record-item {
		min-height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.record-item + .record-item {
		border-top: $km-border-color solid 1rpx;
	}
	.record-add {
		margin: 20rpx auto 0;
		display: block;
		width: 220rpx;
	}
</style>
